<template>
    <div>
        <div class="content-header">
            <div class="container">

            </div>
        </div>

        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <el-upload ref="upload" class="upload-demo" :action="uploadExcel2JsonUrl" :limit="1"
                            :on-exceed="handleExceed" :auto-upload="false" :on-success="handleUploadSuccess">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                            <el-button class="ml-3" type="success" @click="submitUpload">
                                上传到服务器
                            </el-button>
                            <template #tip>
                                <div class="el-upload__tip text-red">
                                    限制1个文件，新文件会覆盖老文件
                                </div>
                            </template>

                        </el-upload>

                        <el-button type="primary" class="btn btn-info btn-sm ml-2" @click="addOneGroup">+</el-button>

                        <el-button type="danger" class="btn btn-info btn-sm ml-2" @click="delOneGroup">-</el-button>


                        <el-form ref="form" class="mt-3" label-width="auto" :label-position="labelPosition" :size="size">

                            <el-form-item v-for="(group, index) in formGroups" :key="index" label="">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-input v-model="group.source_str" label="source-str" placeholder="查找字符串" />
                                    </el-col>
                                    <el-col :span="12">
                                        <el-input v-model="group.target_str" label="Last Name" placeholder="替换字符串" />
                                    </el-col>
                                </el-row>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="clickReplace">替换</el-button>

                            </el-form-item>
                        </el-form>

                    </div>

                    <div class="col-lg-8" style="height: auto; width: 100%;">
                        <!-- <vue-json-pretty :data="responseData"></vue-json-pretty> -->
                        <!-- <VJsoneditor v-model="responseData"  style="height: 400px; width: 100%;" /> -->
                        <!-- <textarea  style="height:100%;padding:10px 10px 10px 30px;border:0;border-radius:0;resize: none;
                          outline:none;border: 1px solid #eee" class="form-control" id="curlResTextarea" rows="8"  v-model="responseData"></textarea> -->
                        <!-- <pre>{{ formattedJson }}</pre> -->
                        <!-- <VueJsonEditor v-model="responseData" :options="jsonEditorOptions" style="height: 400px; width: 100%;" /> -->

                        <json-editor-vue v-model="responseData" class="editor" :current-mode="currentMode"
                            :options="jsonEditorOptions" />
                    </div>

                </div>

                <row></row>

            </div>

        </div>
    </div>
</template>

<script>
//import { post } from '@/utils/api'
import { ref } from 'vue'
import { genFileId } from 'element-plus'
//import VueJsonEditor from 'v-jsoneditor'
//import VueJsonPretty from 'vue-json-pretty';
// import '@vue-json-pretty/lib/style.css'
import JsonEditorVue from 'json-editor-vue3'
import gconfig from '@/config/global_config'

export default {
    components: {
        //VueJsonPretty,
        //VueJsonEdito
        JsonEditorVue
    },

    name: "Excell2JsonIndex",
    data() {
        return {
            // val: '',
            curlVal: '',
            paramsText: '',
            responseData: '',
            formParam: {
                postParams: ''
            },
            jsonEditorOptions: {
                css: {
                    height: '500px', // 设置想要的高度值
                },
            },
            formGroups: [{ source_str: "", target_str: "" }],
            source_str: '',
            target_str: '',
        };
    },
    methods: {
        delOneGroup() {
            if (this.formGroups.length > 1) {
                this.formGroups.pop();
            }

        },
        addOneGroup() {
            this.formGroups.push({ source_str: "", target_str: "" });
        },
        submitUpload1() {
            console.log("gogo")
        },
        handleUploadSuccess(response) {
            //console.log(file, fileList)
            console.log(response)
            this.responseData = response;
        },
        unescapeString(input) {
            // 将输入字符串封装在双引号内，并解析为 JSON 对象以取消转义
            const jsonString = `"` + input + `"`;
            const unescaped = JSON.parse(jsonString);
            return unescaped;
        },
        clickReplace() {
            this.formGroups.forEach((formGroup) => {

                console.log("FormGroup " + ":" + this.responseData);

                this.replaceString(this.responseData, formGroup.source_str, formGroup.target_str);
                console.log("res: " + this.responseData)
            });
        },
        escapeRegExp(string) {
            return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& 表示整个匹配到的子串
        },
        replaceString(responseData, stringA, stringB) {
            if (typeof responseData === 'object' && responseData !== null) {
                //console.log("obj")
                const replaceStringInObject = (obj) => {
                    for (const key in obj) {
                        if (typeof obj[key] === 'string') {
                            obj[key] = obj[key].replaceAll(stringA, stringB);
                        } else if (typeof obj[key] === 'object' && obj[key] !== null) {
                            replaceStringInObject(obj[key]);
                        }
                    }
                };
                replaceStringInObject(responseData);
            }
            return responseData;
        }
    },
    setup() {
        const upload = ref();
        const uploadExcel2JsonUrl = gconfig.constants.API_ORIGIN + "/tool/upload_excel_2_json";

        const handleExceed = (files) => {

            if (upload.value) {
                console.log("files: " + files)
                upload.value.clearFiles();
                const file = files[0];
                file.uid = genFileId(); // 确保已经定义了 genFileId() 函数
                upload.value.handleStart(file);
            }
        };
        const submitUpload = () => {
            console.log("submit upload:" + upload.value);
            if (upload.value) {
                upload.value.submit();
            }
        };
        return {
            upload,
            handleExceed,
            submitUpload,
            uploadExcel2JsonUrl
        };
    }
};
</script>


<style scoped>
.editor {
    height: 750px;
    width: 800px;
}
</style>